<template>
  <div class="site">
    <header class="site-header">
      <div class="is-top-sticky">
        <nav class="site-branding">
          <div class="site-title">
            <a class="link-home" href="/">
              <span>那年花开</span>
            </a>
          </div>
          <div class="menu-top size-justfiy">
            <router-link class="link-route" to="/">首页</router-link>
          </div>
          <div class="buttons-seperate">
            <button class="btn btn-default" @click="login">登录</button>
            <button class="btn btn-primary" @click="register">注册</button>
            <a class="btn btn-draft" href="#">
              <i class="iconfont">&#xe616;</i>
              <span>写文章</span>
            </a>
          </div>
        </nav>
      </div>
    </header>
    <main class="site-content">
      <router-view class="content-area size-justfiy" />
      <aside class="widget-area">
        <widget class="widget" title="工具">
          <data-render :shouldRender="false">
            没有数据
          </data-render>
        </widget>
      </aside>
    </main>
    <footer class="site-footer">
      <div class="site-info">
        <div class="footer-left size-justfiy">
          <p>
            Since 2019, Build with <span style="color: red;">♥</span> by <a href="//">那年花开</a>
          </p>
          <p class="ipc">
            <a href="//" target="_blank" rel="nofollow">京ICP备10214964号-3</a>
          </p>
        </div>
        <div class="footer-right">
          <p class="site-title">那年花开</p>
          <p>
            <small>未知名</small>
          </p>
        </div>
      </div>
    </footer>
    <Dialog
      :visible.sync="dialog.visible"
      :title="dialog.title"
    >
      <div class="dialog-title" slot="header">
        <button class="btn">登录</button> ·
        <button class="btn">注册</button>
      </div>
      <main slot="content">
        <label>
          <span>账号</span>
          <input type="text">
        </label>
        <label>
          <span>密码</span>
          <input type="password">
        </label>
      </main>
      <div slot="footer">
        <button class="btn btn-primary">立即登录</button>
      </div>
    </Dialog>
  </div>
</template>
<script>
export default {
  components: {
    Dialog: () => import('./components/Dialog'),
    Widget: () => import('./components/Panel'),
    DataRender: () => import('./components/DataRender')
  },
  methods: {
    login () {
      console.log('点击了登录按钮')
      this.dialog = Object.assign(
        {},
        this.dialog,
        {
          visible: true,
          title: '登录'
        }
      )
    },
    register () {
      console.log('点击了注册按钮')
      this.dialog = Object.assign(
        {},
        this.dialog,
        {
          visible: true,
          title: '注册'
        }
      )
    }
  },
  data () {
    return {
      dialog: {
        visible: false,
        title: ''
      }
    }
  }
}
</script>
<style lang="scss">
@import "./stylesheets/index.scss";
@import "./stylesheets/login.scss";
</style>
<style lang="scss" scoped>
@import "./stylesheets/widget.scss";
</style>
